<template>
  <div>
    <div v-show="onebusiness">
      <div class="bustopNav">
        业务列表
      </div>
      <div class="businessList">
        <div class="busContent" v-for="fl in busList" @click="nextPart(fl.serviceType)" :key="fl.id">
          <span style="display: flex; align-items: center;font-size: 16px;">
            <img style="width:26px;margin-right:24px;" src="~@/assets/images/regZhyw.png" alt="" />
            {{ fl.serviceTypeName }}
          </span>
          <img src="~@/assets/images/regright.png" style="width:8px;" alt="" />
        </div>
      </div>
    </div>
    <div v-show="twobusiness">
      <div class="bustopNav">
        温馨提示
      </div>
      <div class="busMessage">
        <p>尊敬的客户，请您在办理业务的时候，携带以下基本材料：</p>
        <p style="margin-top: 32px;">
          投保人或被保险人身份证原件，如果被保险人无身份证，请带上被保险人户口簿，如果是委托办理，还需要带上委托人身份证；
        </p>
        <p style="margin-top: 32px;">保险合同原件；</p>
        <p style="margin-top: 32px;">
          如果是收付款业务，请带上投保人、被保险人或受益人银行卡，仅限工商银行、农业银行、中国银行、建设银行、邮储银行、兴业银行、招商银行、中信银行、交通银行、福建省农村信用社；
        </p>
        <p style="margin-top: 32px;">若有疑问请拨打客服电话95519咨询。</p>
      </div>
      <div class="sureButton">
        <button @click="toRegister()" class="sureBut">
          继续预约
        </button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import '../../style/reservaIndex_index.css';
import 'vant/lib/toast/style';
import { Toast, Dialog} from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
import Header from '@/components/Header.vue';
Vue.use(Toast);
Vue.use(Dialog);
Component.registerHooks(['beforeRouteUpdate', 'beforeRouteLeave', 'beforeRouteLeave']);
@Component({
  components: { Header },
})
export default class BusinessList extends Vue {
  departId: any = ''; // 网点部门id
  customerName: any = ''; // 客户姓名
  customerPhone: any = ''; // 客户手机号
  address: any = '';
  fullname: any = '';
  openId: any = '';
  serviceType: any = '';
  onebusiness: any = true;
  twobusiness: any = false;
  busList: any = [];
  latitude:any = '';
  longitude:any = '';
  mounted() {
   document.title = '网点预约'
    this.departId = this.$route.query.departId; // 网点部门id
    this.customerName = this.$route.query.customerName; // 客户姓名
    this.customerPhone = this.$route.query.customerPhone; // 客户手机号
    this.address = this.$route.query.address;
    this.fullname = this.$route.query.fullname;
    this.openId = this.$route.query.openId;
    this.longitude = this.$route.query.longitude; 
    this.latitude= this.$route.query.latitude;
    this.getBusList();
  }
  nextPart(serviceType: any) {
    this.onebusiness = false;
    this.twobusiness = true;
    this.serviceType = serviceType;
  }
  // 获取业务列表
  getBusList() {
    // Toast.loading({
    //   duration: 0,
    //   message: '加载中...',
    //   forbidClick: true,
    // });
    var _this = this;
    cloudApi
      .queryLineUp({
        departId: this.departId,
      })
      .then(function(res: any) {
        // Toast.clear();
        if(res.data.code=='0000'){
          if (res.data && res.data.queuesData) {
            if (res.data.queuesData.queues && res.data.queuesData.queues.length > 0) {
              res.data.queuesData.queues.forEach((elem: any) => {
                if(elem.serviceType == '01'){
                  elem.serviceTypeName = '承保';
                } else if(elem.serviceType == '02'){
                  elem.serviceTypeName = '理赔';
                }
              });
              if(res.data.queuesData.queues.length == 1){
                res.data.queuesData.queues[0].serviceType = '01';
                res.data.queuesData.queues[0].serviceTypeName = '承保';
                res.data.queuesData.queues.push({
                  countProcessing: 0,
                  countWaiting: 0,
                  dealStatus: "",
                  serviceType: "02",
                  serviceTypeName:'理赔'
                })
              }
              _this.busList = res.data.queuesData.queues;
            }
          }
        }else{
            Dialog.confirm({
              title: '温馨提示',
              message: res.data.message,
              confirmButtonColor: '#009B63',
            })
            return; 
        }
      });
  }
  //继续预约
  toRegister() {
    this.$router.push({
      path: 'businessDetail',
      query: {
        departId: this.departId,
        customerName: this.customerName,
        customerPhone: this.customerPhone,
        serviceType: this.serviceType,
        address: this.address,
        fullname: this.fullname,
        openId: this.openId,
        longitude: this.longitude,
        latitude: this.latitude,
      },
    });
  }
}
</script>
<style lang="less" scoped></style>
